<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>404 Page not found!</title>
	  <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri();?>/skin/css/bootstrap.min.css">
    <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri();?>/skin/css/reset.css">
     <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri();?>/skin/css/css.css"> -->
</head>
<body>
<style>

	body{
    background:fixed ;
    background-image: url(<?php echo get_stylesheet_directory_uri();?>/skin/images/page-404-bg-min.png);
/*    background-image: cross-fade(var(--transparent), url(<?php echo get_stylesheet_directory_uri();?>/skin/images/page-404-bg.jpg), 70%);
    background-image: -webkit-cross-fade(var(--transparent), url(<?php echo get_stylesheet_directory_uri();?>/skin/images/page-404-bg.jpg), 70%);*/
    background-size: 100% 100%;
    background-repeat:  no-repeat   ;
    background-position:center center;
    background-color: rgba(14,14,14,.6);
    /*background-size: cover;*/


	}
	.errorbox{
    width: 768px;

    background-color: rgba(214,214,214,.5);

  position: fixed;
  top: 50%;
  left: 50%;
  /*background-color: #000;*/
  /*width:50%;*/
  /* height: 500px; */
-webkit-transform: translateX(-50%) translateY(-50%);
border:2rem #ffffff solid;
padding: 1rem
}
#searchform-so {
    display: block;
    float: unset;
    margin: 0 auto;
    width: 80%;
    transition: width 0.5s;
    overflow: hidden;

}
.follow-us-item{
      margin: 0 auto;
    width: 100%;
    padding-top: 0rem;
}
.follow-us-item ul, .follow-us-item li {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}
.follow-us-item li{
margin-bottom: 0.5rem;
}
.follow-us-item a{
  background: #042234;
  margin-right: 1rem;
  padding: 0.5rem;
  color: #ffffff;
  text-decoration: none;
}
input{
  background: #042234;
    padding: 1rem;
    line-height: 2rem;
    border-radius: 5px 0px 0px 5px;
    border:0px;
}
#searchsubmit-so{

}

		

  /*#mainImage_create{display:table-cell; vertical-align:middle;}*/
</style>
<style>
        * {
            box-sizing: border-box;
        }




        div.search {    padding: 1px 0 20px 0;}

        form {
            position: relative;
            width: 300px;
            margin: 0 auto;
        }

        input, button {
            border: none;
            outline: none;
        }

        input {
            width: 100%;
            height: 42px;
            padding-left: 13px;
        }

        button {
            height: 42px;
            width: 42px;
            cursor: pointer;
            position: absolute;
        }

        /*搜索框1*/
        
        /*搜索框6*/
        /*.bar6 {background: #F9F0DA;}*/
        .bar6 input {
            border: 2px solid #042234;
            border-radius: 5px;
            background: #042234;
            top: 0;
            right: 0;
            color: #ffffff;
        }
        .bar6 button {
            background: #c5464a;
            border-radius: 0 5px 5px 0;
            width: 60px;
            top: 0;
            right: 0;
        }
        .bar6 button:before {
            content: "Search";
            font-size: 13px;
            color: #F9F0DA;
        }
        .wx-img {
    position: absolute;
        bottom: 0px;
    left: 40px;
    display: none;
}
.webchat{
    position: relative;
}
.webchat:hover .wx-img{
    display: block;
}

    </style>



<div class="errorbox">
    <svg id="mainImage_create" data-name="mainImage" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 171.2 81.5">
        <style id="svgStyle">
        @import url('https://fonts.googleapis.com/css?family=Poppins');
        .changeColor {
            fill: #4f86ed;
        }
        
        #title {
            font-size: 50%;
            font-family: 'Poppins', serif;
        }
        
        .cls-1 {
            opacity: 0.3;
        }
        
        .cls-7 {
            opacity: 0.8;
        }
        
        .cls-2 {
            fill: #fff;
        }
        
        .cls-10,
        .cls-11,
        .cls-12,
        .cls-14,
        .cls-16,
        .cls-3 {
            fill: none;
        }
        
        .cls-3 {
            stroke: #5c7690;
        }
        
        .cls-10,
        .cls-11,
        .cls-12,
        .cls-3 {
            stroke-miterlimit: 10;
        }
        
        .cls-14,
        .cls-15,
        .cls-16,
        .cls-3 {
            stroke-width: 0.5px;
        }
        
        .cls-4 {
            fill: #ffe1d9;
        }
        
        .cls-5 {
            fill: #ffcfbf;
        }
        
        .cls-6 {
            fill: #fecbb6;
        }
        
        .cls-9 {
            fill: #fecb02;
        }
        
        .cls-10,
        .cls-12 {
            stroke: #d26f51;
        }
        
        .cls-10,
        .cls-11 {
            stroke-width: 0.38px;
        }
        
        .cls-11 {
            stroke: #000;
        }
        
        .cls-12 {
            stroke-width: 0.19px;
        }
        
        .cls-13 {
            opacity: 0.45;
        }
        
        .cls-14,
        .cls-15,
        .cls-16 {
            stroke: #b0bec5;
            stroke-linejoin: round;
        }
        
        .cls-15 {
            fill: #edf0f2;
        }
        
        .cls-16 {
            stroke-linecap: round;
        }
        
        .cls-17 {
            font-family: 'PT Sans', sans-serif;
            font-size: 49.87px;
            font-weight: 700;
        }
        
        .cls-18 {
            fill: #fffdbb;
            opacity: 0.5;
        }
        /*---------------------------
                   SVG Animate
          ---------------------------*/
        
        .earMove {
            transition: all ease-in-out 2s;
            transform-origin: 50% 50%;
            animation: earmove 1.5s linear infinite alternate;
        }
        
        .faceMove {
            transition: all ease-in-out 2s;
            transform-origin: 50% 50%;
            animation: move 1.5s linear infinite alternate;
        }
        
        .neckMove {
            transition: all ease-in-out 2s;
            transform-origin: 50% 50%;
            animation: neck 1.5s linear infinite alternate;
        }
        
        @keyframes earmove {
            0% {
                transform: translateX(-0.3px) translateY(0.6px);
            }
            30% {
                transform: translateX(-0.3px) translateY(0.6px);
            }
            60% {
                transform: translateX(-0.7px) translateY(0px);
            }
            70% {
                transform: translateX(-0.7px) translateY(-0.3px);
            }
            100% {
                transform: translateX(-0.7px) translateY(-0.3px);
            }
        }
        
        @keyframes move {
            0% {
                transform: translateX(-0.3px) translateY(0.6px);
            }
            30% {
                transform: translateX(-0.3px) translateY(0.6px);
            }
            60% {
                transform: translateX(2px) translateY(0px);
            }
            70% {
                transform: translateX(2px) translateY(-0.3px);
            }
            100% {
                transform: translateX(2px) translateY(-0.3px);
            }
        }
        
        @keyframes neck {
            0% {
                transform: translateY(0.7px);
            }
            50% {
                transform: translateY(0.7px);
            }
            100% {
                transform: translateY(0px);
            }
        }
        </style>
        <path id="c-1" class="changeColor cls-1" d="M46.62,52.5c5.78,4.9,21.14,8.4,39.19,8.4s33.41-3.5,39.19-8.4c-5.78-4.9-21.14-8.4-39.19-8.4S52.41,47.6,46.62,52.5Z"></path>
        <path class="cls-2" d="M99.73,47.71H68.65a7.13,7.13,0,0,0-7.13,7.13V60a152.58,152.58,0,0,0,24.3,1.83,157.87,157.87,0,0,0,21.05-1.35V54.84A7.13,7.13,0,0,0,99.73,47.71Z"></path>
        <path class="cls-3" d="M123.56,55.81C115,58.94,101.27,61,85.81,61c-26,0-47-5.71-47-12.76,0-3.45,5.05-6.58,13.25-8.88"></path>
        <path class="cls-3" d="M55.37,38.47a140,140,0,0,1,30.44-3c26,0,47,5.71,47,12.76,0,2.4-2.44,4.65-6.69,6.57"></path>
        <path class="cls-3" d="M53.41,38.95l.94-.24"></path>
        <path class="cls-4" d="M91.68,47.71l-.75-11.2L79.15,43.84l-1.69,3.87H75.79c0,3.36,3.76,6.08,8.4,6.08s8.4-2.72,8.4-6.08Z"></path>
        <path class="cls-5 neckMove" d="M78,46.53a27.19,27.19,0,0,0,6.41.82c3.1,0,7.11-2.19,7.11-2.19l-.42-6.2L79.15,43.84Z"></path>
        <polygon class="earMove" points="92.59 32.22 92.59 28.5 76.77 27.71 76.77 32.22 92.59 32.22"></polygon>
        <circle class="cls-6 earMove" cx="78.06" cy="34.04" r="2.47"></circle>
        <path class="cls-4" d="M81.74,57.06,60.63,49.72h0A6.72,6.72,0,1,0,57.7,62.49H93.25C93.25,56.78,81.74,57.06,81.74,57.06Z"></path>
        <path class="cls-4" d="M77.46,25H90.92a0,0,0,0,1,0,0V39.38a6.73,6.73,0,0,1-6.73,6.73h0a6.73,6.73,0,0,1-6.73-6.73V25A0,0,0,0,1,77.46,25Z"></path>
        <rect id="c-2" class="changeColor cls-7" x="74.82" y="26.48" width="19.14" height="2.45" transform="translate(1.29 -3.65) rotate(2.49)"></rect>
        <path id="c-3" class="changeColor cls-7" d="M84.36,18.69h.5a7.8,7.8,0,0,1,7.8,7.8v0a0,0,0,0,1,0,0H76.56a0,0,0,0,1,0,0v0A7.8,7.8,0,0,1,84.36,18.69Z" transform="translate(1.06 -3.66) rotate(2.49)"></path>
        <polygon id="c-4" class="changeColor cls-8" points="82.44 23.89 92.18 24.32 92.59 24.34 92.48 26.84 80.96 26.33 82.44 23.89"></polygon>
        <circle class="cls-9 faceMove" cx="78.72" cy="23.73" r="3.73" transform="translate(51.58 101.34) rotate(-87.51)"></circle>
        <circle class="cls-2 faceMove" cx="78.72" cy="23.73" r="2.36" transform="translate(51.58 101.34) rotate(-87.51)"></circle>
        <circle class="cls-4 earMove" cx="90.92" cy="34.04" r="2.47"></circle>
        <path class="cls-4" d="M112.2,53l-9.87-21.92-3-5.48-11.86-.22,7.42,3.35H91.55l5.82,4.58,2,22.26h0A6.72,6.72,0,1,0,112.2,53Z"></path>
        <ellipse class="faceMove" cx="80.09" cy="33.12" rx="0.53" ry="0.59"></ellipse>
        <ellipse class="faceMove" cx="86.34" cy="33.12" rx="0.53" ry="0.59"></ellipse>
        <polyline class="cls-10 faceMove" points="84.19 31.08 81.74 37.01 84.39 37.01"></polyline>
        <path class="cls-10 faceMove" d="M83.06,40.36a4,4,0,0,1,2.75-1"></path>
        <line class="cls-11 faceMove" x1="81.07" y1="30.33" x2="78.47" y2="30.58"></line>
        <line class="cls-11 faceMove" x1="86.34" y1="30.45" x2="88.15" y2="31.08"></line>
        <line class="cls-12" x1="106.86" y1="47.82" x2="110.99" y2="46.11"></line>
        <line class="cls-12" x1="107.43" y1="49.9" x2="111.55" y2="48.19"></line>
        <line class="cls-12" x1="107.99" y1="51.98" x2="112.11" y2="50.27"></line>
        <g class="cls-13">
            <rect class="cls-14" x="85.81" y="2.46" width="10.77" height="3.5"></rect>
            <rect class="cls-15" x="96.58" y="2.46" width="10.77" height="3.5"></rect>
            <rect class="cls-14" x="92.19" y="5.95" width="10.77" height="3.5"></rect>
            <line class="cls-16" x1="107.36" y1="5.95" x2="109.63" y2="5.95"></line>
            <line class="cls-16" x1="110.68" y1="5.95" x2="111.57" y2="5.95"></line>
        </g>
        <g class="cls-13">
            <rect class="cls-16" x="125" y="23.12" width="10.77" height="3.5"></rect>
            <rect class="cls-15" x="130.39" y="26.62" width="10.77" height="3.5"></rect>
            <rect class="cls-16" x="119.62" y="26.62" width="10.77" height="3.5"></rect>
            <line class="cls-16" x1="141.16" y1="26.62" x2="145.73" y2="26.62"></line>
            <line class="cls-16" x1="125" y1="23.12" x2="115.4" y2="23.12"></line>
            <line class="cls-16" x1="117.95" y1="26.62" x2="115.4" y2="26.62"></line>
        </g>
        <g class="cls-13">
            <rect class="cls-16" x="39.34" y="16.12" width="10.77" height="3.5"></rect>
            <rect class="cls-16" x="39.34" y="23.11" width="10.77" height="3.5"></rect>
            <rect class="cls-16" x="50.11" y="23.11" width="10.77" height="3.5"></rect>
            <rect class="cls-16" x="50.11" y="16.12" width="10.77" height="3.5"></rect>
            <rect class="cls-15" x="44" y="19.61" width="10.77" height="3.5"></rect>
            <rect class="cls-16" x="33.23" y="19.61" width="10.77" height="3.5"></rect>
            <line class="cls-16" x1="60.89" y1="19.61" x2="65.51" y2="19.61"></line>
            <line class="cls-16" x1="39.34" y1="16.12" x2="35.46" y2="16.12"></line>
            <line class="cls-16" x1="36.45" y1="26.61" x2="33.23" y2="26.61"></line>
            <line class="cls-16" x1="63.2" y1="23.11" x2="65.51" y2="23.11"></line>
        </g>
        <polyline class="cls-3" points="115.4 58.12 115.4 38.27 120.2 37.01"></polyline>
        <polyline class="cls-3" points="129.01 53.21 129.01 43.14 131.74 42.13"></polyline>
        <path class="cls-3" d="M115.4,42.13a53.27,53.27,0,0,1,8,2A42,42,0,0,1,129,47"></path>
        <path class="cls-3" d="M115.4,47.34a53.27,53.27,0,0,1,8,2A42,42,0,0,1,129,52.22"></path>
        <path class="cls-3" d="M115.4,52.56a53.27,53.27,0,0,1,8,2l1,.42"></path>
        <path class="cls-18 faceMove" d="M78.84,26.09l0-4.71L68.05,18.32a.91.91,0,0,0-.45-.13c-1.17,0-2.11,2.46-2.11,5.5s.95,5.5,2.11,5.5a.9.9,0,0,0,.44-.12Z"></path>
        <path class="cls-5" d="M57.7,62.49H93.25A3.67,3.67,0,0,0,92.92,61H53.43A6.69,6.69,0,0,0,57.7,62.49Z"></path>
        <path class="cls-12" d="M88.15,60.27s1.7.95,1.7,2.22"></path>
        <path class="cls-5" d="M101.81,61a6.68,6.68,0,0,0,8.51,0Z"></path>
        <polygon class="cls-5" points="90.92 30.25 77.46 29.69 77.46 28.64 90.92 29.22 90.92 30.25"></polygon>
        <text id="title" transform="matrix(1 0 0 1 44.7249 78)">OPPS!PAGE NOT FOUND</text>
    </svg>
    <div>
        <div class="search400 search bar6">
            <form method="get" id="searchform-so" action="<?php echo home_url(); ?>" style="width: 300px;">
                <span class="search-input"><input type="text" value="" name="s" id="so" class="bk da" placeholder="Search..." required="">
                </span>
                <button type="submit" id="searchsubmit-so" class="bk da"><i class="be be-search"></i></button>
                <div class="clear">
                </div>
            </form>
        </div>
        <div class="follow-us-item">
            <?php wp_nav_menu(array( 
                'menu' => 'main_menu',
                'depth' => 1,
                'menu_class'=>'category-bar__list'
                )
            ); ?>
        </div>
    </div>
</div>

</body>
</html>